import {Graph, InternalEvent} from "@maxgraph/core";
import baseConfig from "@/views/DrawMain/configure/baseConfig.ts";
import makeDraggable from "@/views/DrawMain/makeDraggable.ts";
import setStyles from "@/views/DrawMain/configure/setStyles.ts";
import configPorts from "@/views/DrawMain/configure/configPorts.ts";
import {useGraphStore} from "@/store/graphStore.ts";
import configureMenu from "@/views/DrawMain/configure/configureMenu.ts";
import configureKey from "@/views/DrawMain/configure/configureKey.ts";

export default function () {
    const graphStore = useGraphStore();
    const container = document.getElementById('graph') as HTMLDivElement;
    const graph = new Graph(container);
    const parent = graph.getDefaultParent();
    graphStore.initGraph(graph);
    // 禁用默认的右击菜单
    InternalEvent.disableContextMenu(container);
    // 自定义右键菜单
    configureMenu(graph);
    // 配置按键事件
    configureKey(graph);
    setStyles(graph);
    baseConfig(graph);
    configPorts(graph);
    makeDraggable(graph);
    // 添加新节点
    graph.batchUpdate(() => {
        const vertex01 = graph.insertVertex({
            parent,
            position: [10, 10],
            size: [100, 100],
            value: 'rectangle',
        });
        const vertex02 = graph.insertVertex({
            parent,
            position: [350, 90],
            size: [50, 50],
            style: {
                shape: 'ellipse',
                verticalAlign: 'top',
                verticalLabelPosition: 'bottom',
            },
            value: 'ellipse',
        });
        graph.insertEdge({
            parent,
            source: vertex01,
            target: vertex02,
            value: 'edge',
            style: {
                edgeStyle: 'orthogonalEdgeStyle',
                rounded: true,
            },
        });
    })

}